<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 常见this指向(this->函数的内置参数 -> 函数调用时依存的对象)
    // 1. 函数在调用时没有依存的对象(普通命名函数,匿名函数直接调用) this->window , 严格模式(this->undefind)
    // 2. 函数在调用时没有依存的对象 this->调用时依存的对象(调用时属于谁就指向谁 obj.say btn.onclick)
    // 3. 箭头函数 没有自己的this指向 -> 依赖于父作用域的this指向


    // 那么函数调用时 this指向可以修改么?

    // 可以的!  官方提供了改变this指向的三个方法  call apply bind => 所有的函数均可以使用(除箭头函数以外),是函数的方法


    // call apply bind

    // call(thisObj,arg1,arg2...argN)
    // 1. 调用原函数
    // 2. 在本次函数执行时,强制将this指向call()方法的第一参数, 如果不传参,或者传入null,undefined => 不改变this指向
    // 3. 如果原函数需要接收参数,从第二参数开始依次向后传

    // apply(thisObj,[arg1,arg2...argN])
    // 1. 调用原函数
    // 2. 在本次函数执行时,强制将this指向apply()方法的第一参数, 如果不传参,或者传入null,undefined => 不改变this指向
    // 3. 如果原函数需要接收参数,先将参数整合到数组中,再将数组作为第二参数传入

    // 小结: 
    // call apply => 调用原函数,在本次函数执行时,强制将this指向方法的第一参数  (借鸡生蛋 -> 借用现有方法(借一次))


    // function fn(a, b) {
    //     console.log("函数执行了", a, b);
    //     console.log("this", this);
    // }

    // 普通调用
    // fn();  // this -> window

    // fn.call(); // 调用原函数 fn();  不改变this指向
    // fn.call(null);  // this-> window
    // fn.call(undefined);  // this-> window


    // fn.call(document); // 调用原函数(执行一次),本次执行时 this-> document

    // fn.call(1);  // this-> Number {1}   (new Number(1))
    // fn.call(NaN);  // this-> Number {1}   (new Number(1))
    // fn.call("1");  // this-> String {'1'}


    // fn.call(document, 10, 20);
    // fn.call(document.body, 100, 200);


    // apply()
    function fn(a, b) {
        console.log("函数执行了", a, b);
        console.log("this", this);
    }


    // fn.apply();
    // fn.apply(null);
    // fn.apply(undefined);

    // fn.apply(document)

    // fn.apply(document, [10, 20])
    // fn.apply(document.body, [100, 200])








</script>

</html>